<template>
	<view class="sp-section sp-oa">
		
		<!-- 列表 -->
		<view class="sp-oa__content">
			
			<view class="sp-oa__tips" style="display: flex; margin: 20rpx 0;">
				<u-tag :text="`现有空栏: ${pigs.has}个`" type="success" size="mini" />
				<u-tag :text="`现有空栏: ${pigs.empty}个`" type="primary" size="mini" style="margin-left: 10px;" />
			</view>
			
			<view class="sp-title" style="margin-bottom: 20rpx;">
				<u-cell class="sp-oa__boxes-name" :title="farm.farm_name" arrow-direction="down" @click="farmShow = true">
					<text slot="value">
						<u-icon name="arrow-down" size="24" />
					</text>
				</u-cell>
			</view>
			
			<!-- 场/栋舍 -->
			<view class="sp-oa__boxes" v-for="(item, $index) in build" :key="item.id">
				<u-collapse :border="false" :value="[item.farm_name]">
					<u-collapse-item class="sp-oa__boxes-name" :name="item.farm_name" :title="item.farm_name">
						<view class="sp-oa__boxes-list" v-if="item.farm_scene && item.farm_scene.length">
							<view
								v-for="(tags, $tags) in item.farm_scene"
								:key="tags.id"
								class="sp-oa__boxes-item"
								:class="tags.has_pig ? 'active' : ''"
								@click="setFarmInto(tags.id, !tags.has_pig, $index, $tags)"
							>
								<text>{{ tags.name }}</text>
								<text>{{ tags.has_pig ? '有猪' : '无猪' }}</text>
							</view>
						</view>
						<u-empty v-else />
					</u-collapse-item>
				</u-collapse>
			</view>
		</view>
		<!-- 选择农场 -->
		<!-- <u-action-sheet :actions="farmList" title="选择农场" :show="farmShow" closeOnClickOverlay @close="farmShow = false"  @select="getBuildByFarm"></u-action-sheet> -->
		<u-picker :show="farmShow" :columns="[farmList]" keyName="farm_name" closeOnClickOverlay @close="farmShow = false" @confirm="getBuildByFarm" />
	</view>
</template>

<script>
	import { getFarm, setFarmEmpty } from '@/api/alot.js'
	
	export default {
		name: 'spIndexData',
		data() {
			return {
				typeIndex: 0,
				build: [],
				pigs: {
					has: 0,
					empty: 0
				},
				farm: {},
				farmList: [],
				farmShow: false,
				buildTree: [],
			}
		},
		onShow() {
			this.getFarmInfo()
		},
		mounted() {},
		methods: {
			setTypeIndex(index) {
				this.typeIndex = index
			},
			// 获取栏位信息
			// 获取农场数据
			getFarmInfo() {
				const token = uni.getStorageSync('token')
				const users = uni.getStorageSync('aiUserInfo')
				uni.request({
					url: `${getFarm}?institute=${users.enterprise_id}&phone=${users.username}`,
					method: 'get',
					dataType: 'json',
					header: {
						authorization: token
					},
					success: (res) => {
						const list = res.data.data
						if (list && list.length) {
							const farm = list.filter((item) => item.level === 0)
							const build = list.filter((item) => item.level === 1)
							this.farm = farm && farm.length ? farm[0] : {}
							this.farmList = farm.map(item => {
								item.name = item.farm_name
								return item
							})
							this.buildTree = farm.map(item => {
								item.children = build.filter(dv => dv.parent == item.id)
								return item
							})
							this.getBuildByFarm(this.farm)
							// this.build = list.filter((item) => item.level === 1)
							this.getPigs()
						}
					}
				})
			},
			// 根据农场id获取农场数据
			getBuildByFarm(e) {
				this.farm = e.value[0]
				const build = this.buildTree.find(item => item.id == e.value[0].id)
				this.build = build?.children ?? []
				// console.log(this.build)
				this.farmShow = false
				if (this.build && this.build.length) {
					this.getPigs()
				} else {
					this.pigs.has = 0
					this.pigs.empty = 0
				}
			},
			// 根据build的is_pig字段计算哪些有猪
			getPigs() {
				const build = this.build.flatMap(item => item.farm_scene)
				if (build && build.length) {
					const pigs = build.filter(item => item.has_pig)
					this.pigs.has = pigs.length
					this.pigs.empty = build.length - pigs.length
				}
			},
			// 把有猪的栏位设置成空栏
			setFarmInto(id, has, pindex, tindex) {
				const token = uni.getStorageSync('token')
				uni.request({
					url: `${setFarmEmpty}${id}/`,
					method: 'PATCH',
					dataType: 'json',
					data: {
						has_pig: has
					},
					header: {
						authorization: token
					},
					success: (res) => {
						if (res.data.code === 0) {
							// this.getFarmInfo()
							const obj = this.build[pindex].farm_scene[tindex]
							obj.has_pig = has
							this.build[pindex].farm_scene.splice(tindex, 1, obj)
							uni.setStorageSync('build', this.build)
							this.getPigs()
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.sp-oa__boxes-list {
		justify-content: space-between;
	}
	.sp-oa__boxes-item {
		flex: 0 0 140rpx;
		height: 140rpx;
		border: 1rpx solid #eee;
		box-sizing: border-box;
		
		&.active {
			color: #fff;
			border-color: #b085f9;
			background-color: #b085f9;
			
			text {
				color: #fff;
			}
		}
	}
</style>